import React, { memo } from 'react';
import { Card, Radio } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from './Home.less';
import { Pie } from '@/components/Charts';

const ProportionSales = memo(
  ({ loading, salesPieData }) => (
    <Card
      loading={loading}
      className={styles.salesCard}
      bordered={false}
      title={
        <FormattedMessage
          id="app.home.distribution-of-user-questions-yesterday"
          defaultMessage="The Proportion of Sales"
        />
      }
      bodyStyle={{ padding: 24 }}
    >
      <Pie
        hasLegend
        subTitle={<FormattedMessage id="app.home.distribution-of-user-questions-yesterday" defaultMessage="Sales" />}
        data={salesPieData}
        valueFormat={value => { value }}
        height={270}
        lineWidth={4}
        style={{ padding: '8px 0' }}
      />
    </Card>
  )
);

export default ProportionSales;
